<template>
  <div class="wrap">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="分类" disabled></el-tab-pane>
      <el-tab-pane label="全部" name="all">
        <div class="d_wrap">
          <div v-for="(item, i) in shoplist" :key="i">
            <img
              :src="'http://47.115.85.237:3000/' + item.product_picture"
              alt=""
            />
            <p>{{ item.product_name }}</p>
            <p>{{ item.product_title }}</p>
            <p>
              <span style="color: orange;"
                ><big
                  ><b>￥{{ item.product_selling_price }}</b></big
                ></span
              >
              &emsp;
              <del style="color: #ccc;">￥{{ item.product_price }}</del>
            </p>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane
        v-for="item in list"
        :key="item.category_id"
        :label="item.category_name"
        :name="String(item.category_id)"
      >
        <div class="d_wrap">
          <div v-for="(item, i) in shoplist" :key="i">
            <img
              :src="'http://47.115.85.237:3000/' + item.product_picture"
              alt=""
            />
            <p>{{ item.product_name }}</p>
            <p>{{ item.product_title }}</p>
            <p>
              <span style="color: orange;"
                ><big
                  ><b>￥{{ item.product_selling_price }}</b></big
                ></span
              >
              &emsp;
              <del style="color: #ccc;">￥{{ item.product_price }}</del>
            </p>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      activeName: "all",
      list: [],
      shoplist: [],
    };
  },
  mounted() {
    this.$axios.post("/api/product/getCategory").then((res) => {
      // console.log(res);
      this.list = res.data.category;
      // console.log(this.list)
    });

    this.$axios
      .post("/api/product/getAllProduct", {
        categoryID: [],
        currentPage: 1,
        pageSize: 15,
      })
      .then((res) => {
        console.log(res);
        this.shoplist = res.data.Product;
      });
  },
  methods: {
    handleClick(tab) {
      console.log(tab.name === "all");
      if (tab.name === "all") {
        this.$axios
          .post("/api/product/getAllProduct", {
            categoryID: [],
            currentPage: 1,
            pageSize: 15,
          })
          .then((res) => {
            console.log(res);
            this.shoplist = res.data.Product;
          });
      } else {
        this.$axios
          .post("/api/product/getProductByCategory", {
            categoryID: [tab.name],
            currentPage: 1,
            pageSize: 15,
          })
          .then((res) => {
            console.log(res);
            this.shoplist = res.data.Product;
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  margin-top: 10px;
  .d_wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    min-height: 600px;
    div {
      background-color: #fff;
      height: 300px;
      margin: 10px;
      img {
        width: 229px;
        height: 229px;
      }
    }
  }
}
.el-tabs--card > .el-tabs__header {
  border-bottom: 1px solid #e4e7ed;
  background-color: #fff;
}
</style>
